<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <!-- 父组件显示区 -->
    <div id="app">
        <!-- 用val来装i时，然后渲染到页面上，需要命个名字来接收b -->
        <h2 style="text-align:center">你点击的商品是:{{b}}</h2>
        <!-- 子组件获取父组件 -->
        <my-cpn :name="itemList" @mycpm="app"></my-cpn>
    </div>
    <!--创建组件-->
    <template id="myCpn">
        <div>
            <!-- 子组件使用获取到的名字 -->
            <!-- item：指取到的数组中的值  name：指从父组件取到的数组 -->
            <!-- <div v-for="item in name">{{item.imgUrl}}</div> -->
            <div v-for="(item,index) in name" @click="changThing(index)">
                <img :src="item.imgUrl" alt="">
                <p>{{item.name}}</p>
                <span>{{item.price|newPrice}}</span>
            </div>



        </div>


        <!-- <div v-for="item in itemList">{{itemList.imgUrl}}</div> -->
    </template>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data () {
                return {
                    // b找不到，需要名一个初始值
                    b: null,
                    itemList: [{
                        id: 1,
                        name: "小米11Ultra，开启影像新时代",
                        imgUrl: "./1.webp",
                        price: 5999,
                    },
                    {
                        id: 2,
                        name: "智能定时|用电统计|过载保护",
                        imgUrl: "./2.webp",
                        price: 49,
                    },
                    {
                        id: 3,
                        name: "小身材也有大智慧",
                        imgUrl: "./3.webp",
                        price: 49,
                    },
                    {
                        id: 4,
                        name: "Redmi Note 9 4G 6000mAh大电量,...",
                        imgUrl: "./4.webp",
                        price: 999,
                    },
                    {
                        id: 5,
                        name: "青年“无须”新选择",
                        imgUrl: "./5.webp",
                        price: 99,
                    },
                    {
                        id: 6,
                        name: "全面屏更多可能",
                        imgUrl: "./6.webp",
                        price: 299,
                    }
                    ],

                }
            },
            components: {
                "my-cpn": {
                    template: "#myCpn",
                    props: ["name"],
                    filters: {
                        newPrice (price) {
                            return "￥" + price.toFixed(2)
                        }
                    },
                    // 点击事件
                    methods: {
                        changThing (index) {
                            let i = this.name[index].id;
                            // 不要命名为驼峰方式
                            // 子传父第一步
                            this.$emit("mycpm", i)
                        }
                    }

                }

            },
            // 父组件的方法
            methods: {
                // app：命名的函数  val:用来接收子组件中的i
                app (val) {
                    // 用渲染的b来获取值
                    this.b = val;
                }
            }
        })

    </script>
</body>

</html>